<template>
  <div id="app">

        <!--banner-->
        <!--1倍宽-->
        <MySwiper/>
        <!--banner end-->

        <!--nav selector-->
        <div class="selector-wrapper">
            <div class="wrapper city-selector-wrapper">
                <div class="title">城市:</div>
                <div class="selector-content">
                    <ul class="city-list">
                        <li class="first city-item" @click="changeCurrentActiveAll" :class="{active: currentActive1 === -1}"><a href="javascript:;">全国</a></li>
                        <li class="city-item" @click="changeCurrentActive1(index,item)" :class="{active: index === currentActive1/1}" v-for="(item,index) in citylist.list" :key="item.id"><a href="javascript:;">{{item.name}}</a></li>
                        <li class="more">
                            <a id="moreCity" href="javascript:;">
                                <span class="moreCity" @click="showCity">更多城市<i class="fa fa-angle-down"></i></span>
                                <span class="moreCityName"></span>
                            </a>
                            <div class="more-city-wrapper" :style="{display: isShow ? 'block' : 'none'}">
                                <div class="more-city-letter-list">
                                    <ul>
                                        <li @click="changeCity(index,$event)" :data-n="index" :class="{active: index === currentActive2/1}" v-for="(item,index) in citylist.more" :key="item.letter"><a href="javascript:;">{{item.letter}}</a></li>
                                    </ul> 
                                </div>
                                <div class="more-city-list">
                                    <ul :style="{display: index === currentIndex/1 ? 'block' : 'none'}" :data-n="index" v-for="(item,index) in citylist.more" :key="item.letter" ref="showUl">
                                        <li v-for="(item2,index2) in item.list" :key="item2.id"><a href="javascript:;">{{item2.fullname}}</a></li>
                                    </ul>
                                </div>
                            </div>
                            
                        </li>
                    </ul>
                </div>
            </div>
            <div class="wrapper type-selector-wrapper">
                <div class="title">类型:</div>
                <div class="selector-content">
                    <ul class="city-list">
                        <li class="first type-item"><a href="javascript:;">全部类型</a></li>
                        <li class="type-item" v-for="(item,index) in alltypelist.quick_select" :key="item.key">
                            <a href="javascript:;">
                                <span>{{item.value}}</span>
                            </a>
                        </li>
                        
                        
                    </ul>
                </div>
            </div>
            <div class="wrapper order-selector-wrapper">
                <div class="title">筛选:</div>
                <div class="selector-content">
                    <ul class="city-list">
                        <li class="first selector-item" v-for="(item,index) in alltypelist.filter" :key="index"><a href="javascript:;">{{item.value}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--nav selector end-->


        <!-- <Zhoubian/> -->

        <!-- ul->tab外部容器 -->
        <nav class="main_tab">
            <!-- ul->tab外部容器 -->
            <ul class="tab_box">
            <li :class="{ select_tab: tabIndex === 1 }" @click="tabSelect(1)">
                漫展演出
            </li>
            <li :class="{ select_tab: tabIndex === 2 }" @click="tabSelect(2)">
                <router-link to="/zhoubian">B站周边</router-link>
                
            </li>
            </ul>
        </nav>

        <!--content-->
        <div class="project-list-wrapper">
            <ul class="project-list">
                <li @click="goDetail(item.id,index)" class="project-list-item" v-for="(item,index) in manzhanlist.result" :key="item.id">
                    <div class="project-list-item-img" :style="`background-image: url(/images/index/${index+1}.jpeg); background-size:cover`"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">{{item.project_name}}</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            {{item.tlabel}}
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">{{item.city}}</span>
                            <span class="venue-name-and-address">{{item.venue_name}}</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">{{item.price_low/100}}</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!--content end-->

        <!--分页按钮-->
        <Pagination/>

        <!-- <Pagination
          :currentPageNo="this.page"
          :total="10"
          :pageSize="16"
          :continueNo="5"
          @changePageNo="getMyOrderInfo"
        ></Pagination> -->
        <!--分页按钮 end-->

        <!--建议 返回顶部-->
        <div class="toolbar-wrapper">
            <div class="left-slider-wrapper">
                <a target="_blank" href="/platform/feedbacklist.html" class="service-wrapper">
                    <div class="service-icon"></div> 
                    <div class="toolbar-title">建议</div>
                </a>
                <div class="scroll-top-wrapper">
                    <div class="scroll-icon"></div> 
                    <div class="toolbar-title">顶部</div>
                </div>
            </div>
        </div>
        <!--建议 返回顶部 end-->

    </div>
</template>

<script>

import Pagination from "../../components/Pagination"
import MySwiper from "../../components/MySwiper"
// import Zhoubian from "../Zhoubian"
import {mapGetters} from "vuex"

export default {
  name: 'Home',
  components: {
      Pagination,
      MySwiper,
    //   Zhoubian
  },
  data(){
      return {
          isShow: false,
          currentIndex: 0,
          currentActive1: -1,
          currentActive2: 0,
          page: 1,
          area: -1,
          tabIndex: 1
      }
  },
  mounted(){
    this.getcitylist();  
    this.getalltypelist();
    this.getmanzhanlist(-1,1);
  },
  methods: {
    showCity(){
        this.isShow = !this.isShow
    },
    getcitylist(){
        this.$store.dispatch("citylist");
    },
    getalltypelist(){
        this.$store.dispatch("alltypelist");
    },
    getmanzhanlist(area,page){
        this.$store.dispatch("manzhanlist",{area,page});
        console.log({area,page})
    },
    //更多城市的点击事件
    changeCity(index,$event){
        // console.log(event.target.parentNode.dataset.n);
        // console.log(this.$refs.showUl[event.target.parentNode.dataset.n].dataset.n)
        this.currentActive2 = index;
        this.currentIndex = this.$refs.showUl[$event.target.parentNode.dataset.n].dataset.n;
    },
    changeCurrentActive1(index,item){
        this.currentActive1 = index;
        this.getmanzhanlist(item.id,this.page);
        console.log(item.id);
    },
    changeCurrentActiveAll(){
        this.page = 1;
        this.currentActive1 = -1;
        this.getmanzhanlist(-1,1);
    },
    
    tabSelect(index) {
        this.tabIndex = index;
    },

    // async getMyOrderInfo() {
    //   this.page = page //加了这行代码，我们就可以省掉分页器事件回调函数
    //   this.getmanzhanlist(this.area,this.page);

    // //   const result = await this.$API.reqMyOrderInfo(this.page, this.limit);
    // //   if (result.code === 200) {
    // //     this.myOrderInfo = result.data;
    // //   }
    // },

    goDetail(id,index){
        this.$router.push({
            path:'/detail',
            query:{
                id,
              index
           }
        })
    }
    
  },
  computed: {
      ...mapGetters(["citylist","alltypelist","manzhanlist"]),

  }
   
}
</script>

<style>
#app {
    width: 100%;
    height: 100%
}


.main_tab {
  height: 88px;
  padding-top: 16px;
}
.main_tab .tab_box {
  width: 232px;
  border-radius: 10px;
  background: rgba(255, 120, 187, 0.5);
  margin: 0 auto;
  height: 56px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.main_tab .tab_box > li {
  width: calc(50% - 30px);
  height: calc(100% - 20px);
  text-align: center;
  background: #fff;
  border-radius: 4px;
  line-height: 1.8em;
  font-size: 20px;
  padding: 0 3px;
  cursor: pointer;
}
.main_tab .tab_box .select_tab {
  font-weight: bold;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}





.selector-wrapper {
    width: 100%;
    height: 120px;
    background: #fff
}

.selector-wrapper a {
    color: #99a2aa
}

.selector-wrapper .wrapper a:hover {
    color: #f25d8e
}

.selector-wrapper .wrapper {
    width: 1160px;
    height: 40px;
    border-bottom: 1px dashed #e5e9ef;
    margin: 0 auto;
    box-sizing: border-box;
    line-height: 40px;
    position: relative
}

.selector-wrapper .title {
    float: left;
    width: 90px;
    font-size: 12px;
    color: #99a2aa;
    letter-spacing: 0
}

.selector-wrapper .selector-content {
    float: left
}

.selector-wrapper .selector-content>ul>li {
    height: 40px;
    float: left;
    line-height: 40px
}

.selector-wrapper .city-selector-wrapper .selector-content>ul>li {
    width: 90px
}

.selector-content .city-list>li>a {
    display: inline-block;
    color: #99a2aa
}

.selector-wrapper .city-list {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 14px;
    display: -ms-flexbox;
    display: flex
}

.selector-wrapper .city-list .first {
    width: 90px;
    padding: 0;
    margin: 0
}

.selector-wrapper .selector-content .city-list .more {
    position: absolute;
    right: 0
}

#moreCity .moreCityName {
    display: block;
    color: #f25d8e
}

#moreType {
    margin-right: 8px
}

#moreType .moreTypeName {
    display: block;
    color: #f25d8e
}

.selector-wrapper .city-list .active a {
    color: #f25d8e
}

.selector-wrapper .more-city-wrapper {
    position: absolute;
    overflow: hidden;
    width: 414px;
    height: 165px;
    right: 0;
    top: 41px;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px #afafaf;
    display: block;
    z-index: 1;
    background: #fff
}


.more-city-letter-list {
    width: 374px;
    height: 31px;
    box-sizing: border-box;
    margin: 9px 20px 0 20px;
    border-bottom: 1px solid #ddd
}

.more-city-letter-list ul {
    width: 374px;
    height: 15px;
    line-height: 15px
}

.more-city-letter-list ul li {
    box-sizing: border-box;
    float: left;
    height: 31px;
    line-height: 31px;
    margin-right: 25px;
    padding: 8px 0
}

.more-city-letter-list ul .active {
    color: #f25d8e;
    border-bottom: 2px solid #f25d8e
}

.more-city-list {
    width: 374px;
    height: 110px;
    margin: 9px 20px 0 20px;
    overflow: auto
}

.more-city-list>ul {
    display: block
}

.more-city-list ul li {
    float: left;
    width: 71px;
    height: 15px;
    padding: 6px 0
}

.type-selector-wrapper .selector-content>ul>li {
    height: 100%;
    width: auto;
    padding-right: 10px;
    margin-right: 18px
}

.selector-wrapper .more-type-wrapper {
    position: absolute;
    overflow: hidden;
    width: 369px;
    height: 80px;
    right: -19px;
    top: 41px;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px #afafaf;
    display: none;
    z-index: 1;
    background: #fff
}

.selector-wrapper .more-type-wrapper li {
    padding-left: 21px;
    float: left;
    width: 102px;
    height: 14px
}

.order-selector-wrapper li {
    width: 140px;
    height: 14px
}

.project-list-wrapper {
    width: 1160px;
    /* height: 2431px; */
    margin: 0 auto
}

.project-list {
    width: 100%;
    /* height: 2431px */
}

.project-list-wrapper .project-list li {
    float: left
}

.project-list-wrapper .project-list li:nth-of-type(even) {
    margin-right: 0
}

.project-list-wrapper .project-list .margin0 {
    margin-right: 0
}

.project-list-item {
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-top: 60px;
    margin-right: 40px;
    width: 560px;
    height: 237px;
    background: #fff;
    box-shadow: 0 0 15px 0 rgba(108, 116, 122, .09);
    border-radius: 8px;
    float: left;
    transition: transform .2s
}

.project-list .project-list-item .project-list-item-img {
    transition: transform .1s;
    background: #fff;
    box-shadow: 3px 3px 2px 0 rgba(108, 116, 122, .3);
    border-radius: 8px;
    left: 20px;
    bottom: 24px;
    position: absolute;
    width: 175px;
    height: 233px
}

.project-list .project-list-item .project-list-item-img img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

.project-list .project-list-item .project-list-item-detail .project-list-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    margin-top: 30px;
    width: 286px;
    height: 48px;
    font-size: 18px;
    color: #222;
    letter-spacing: 0;
    line-height: 24px
}

.project-list .project-list-item .project-list-item-detail {
    margin-left: 223px
}

.project-list-item-detail .project-list-item-time {
    margin-top: 19px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 17px;
    font-size: 14px;
    color: #999
}

.project-list-item-time .fa {
    margin-right: 8px;
    margin-top: 1px
}

.project-list-item:hover {
    box-shadow: 0 15px 20px 0 rgba(108, 116, 122, .4)
}

.project-list-item:hover .project-list-item-img {
    top: -30px
}

.project-list-item-detail .project-list-item-address {
    margin-top: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 17px;
    font-size: 14px;
    color: #999
}

.project-list-item-address .fa {
    margin-right: 8px;
    margin-top: 1px
}

.project-list-item-detail .project-list-item-price {
    display: flex;
    align-items: flex-end;
    margin-top: 40px;
    color: #f25d8e
}



.toolbar-wrapper {
    z-index: 10;
    width: 78px;
    background: #fff;
    box-shadow: 0 2px 22px 0 rgba(214, 186, 216, .5);
    border-radius: 12px;
    position: fixed;
    bottom: 100px;
    right: 60px;
    text-align: center;
    color: #f25d8e;
    font-size: 12px
}

.left-slider-wrapper {
    width: 100%
}

.left-slider-wrapper .service-wrapper {
    display: none;
    color: #f25d8e;
    width: 100%;
    height: 65px;
    margin-top: 15px
}

.toolbar-wrapper .service-icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    background-image: url(../../assets/images/advise.png)
}

.left-slider-wrapper .scroll-top-wrapper {
    display: none;
    width: 100%;
    height: 65px;
    transform: translate3d(0, 0, 0);
    transition: all .55s ease 0s
}

.toolbar-wrapper .scroll-icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    background-image: url(../../assets/images/top.png)
}

.left-slider-wrapper .toolbar-title {
    margin: 4px 0 15px 0
}




</style>
